<template>
    <ui-main :title="$route.name">
        <div class="item one"><h3>默认样式</h3>
            <div style="height:100px">
                <!--组件示例-->
                <ui-marquee :data="marqueeData" width="50%">
                    <!--<template slot-scope="{items}">
                        {{ items.index }} - {{ items.item.title }}
                    </template>-->
                </ui-marquee>
            </div>
            <h3>自定义样式</h3>
            <div style="height:100px">
                <!--组件示例-->
                <ui-marquee :data="marqueeData" width="200px">
                    <template slot-scope="{items}">
                        {{ items.index }} - {{ items.item.title }}
                    </template>
                </ui-marquee>
            </div>
        </div>
        <div class="item two"><!--说明文档-->
            <ui-load-md file="marquee"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                marqueeData: [
                    {
                        title: '用S级找回 被甩的尊严 ',
                        state: '/bui_marquee',
                        type: '',
                        sub: '2018-05-27 01:08'
                    }, {
                        title: '走进新 能源世界 ',
                        state: '/bui_marquee',
                        type: 'danger',
                        sub: '2018-05-27 01:08'
                    }, {
                        title: '对症下药 去修车 ',
                        state: '/home',
                        type: 'primary',
                        sub: '12312存续显存'
                    }, {
                        title: '家里再添新欢 入手奔驰GLA 200',
                        state: '/bui_marquee',
                        type: 'danger',
                        sub: '2018-05-27 01:08'
                    }, {
                        title: '走进新能 源世界',
                        state: '/bui_marquee',
                        type: 'warning',
                        sub: '2018-05-27 01:08'
                    }, {
                        title: '对症下药 去修车',
                        state: '/home',
                        type: 'info',
                        sub: '2018-05-27 01:08'
                    }, {
                        title: '家里再添新欢 入手奔驰GLA 200',
                        state: '/bui_marquee',
                        type: 'danger',
                        sub: '2018-05-27 01:08'
                    }
                ]
            }
        },
        mounted() {

        },
        methods: {
            name() {

            }
        }
    }
</script>
